<template>
    <up-list style="background-color: #f1f1f1;">
        <up-empty :iconSize="150" text="当前暂无反馈" v-if="list.length === 0"></up-empty>
        <up-list-item v-for="item in list" :key="item.id">
            <block>
                <view class="tasklist">
                    <!-- 待审核 -->
                    <view class="task-orange">
                        <view class="cu-bar bg-white solid-bottom margin-top">
                            <view class="action">
                                <view class="task_title"> {{ item.userTypeDesc }}</view>
                            </view>
                            <view class="action" @click='deleteFeedbacks(item.id)'>
                                <button style="background-color: red;color: white;" size="mini">删除</button>
                            </view>
                        </view>
                        <view class="cu-bar bg-white solid-bottom">
                            <view class="action">
                                反馈类型: {{ item.typeDesc }}
                            </view>
                        </view>
                        <view class="cu-bar bg-white solid-bottom">
                            <view class="action">
                                反馈内容：{{ item.content }}
                            </view>
                        </view>
                        <view class="cu-bar bg-white solid-bottom">
                            <view class="action">
                                联系号码：{{ item.contactPhone }}
                            </view>
                        </view>
                        <view class="cu-card article">
                            <view class="cu-bar bg-white solid-bottom">
                                <view class="action">
                                    创建时间：{{ item.createTime }}
                                </view>
                                <view class="action" style="padding-right:10px">
                                    <view class="text_js">
                                        <text class="text-orange">{{ item.statusDesc }}</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </block>
        </up-list-item>
    </up-list>
    <div class="btn_box">
        <up-button type="primary" @click="goAdd">+添加反馈</up-button>
    </div>
    <up-toast ref="uToastRef"></up-toast>
</template>

<script lang="ts" setup>
import { reactive, ref, nextTick } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import {
    getFeedback,
    delFeedback
} from '@/api/complaint'

/* 数据 */
const uToastRef = ref<any>(null)
const list = reactive<any[]>([])


/* 函数 */
const goAdd = () => {
    uni.navigateTo({
        url: '/package_mine/pages/feedback/addFeedback'
    })
}
// 删除
const deleteFeedbacks = async (id: string | number) => {
    uni.showModal({
        title: '提示',
        content: '是否确定删除此反馈？',
        success: async (res) => {
            if (res.confirm) {
                uToastRef.value.show({
                    message: '正在删除反馈',
                    type: 'loading',
                    duration: -1
                })
                let res = await delFeedback({ id })
                uToastRef.value.hide()
                if (res.success) {
                    uToastRef.value.show({
                        positain: 'top',
                        message: '删除成功',
                        type: 'success',
                        duration: 1000,
                        complete() {
                            init()
                        }
                    })
                }
            }
        }
    })
}
// 获取列表
const getList = async () => {
    uToastRef.value.show({
        message: '正在获取反馈列表',
        type: 'loading',
        duration: -1
    })
    let res = await getFeedback({ limit: 100 })
    uToastRef.value.hide()
    if (res.success) {
        list.push(...res.data)
    }
}
// 初始化封装
const init = async () => {
    list.length = 0
    await getList()
}


/* 钩子 */
onShow(async () => {
    await nextTick()
    await init()
})
</script>

<style lang="scss" scoped>
.btn_box {
    position: fixed;
    bottom: 20px;
    left: 5%;
    width: 90%;
    z-index: 100;
}

.text_js {
    position: relative;
    left: 20rpx;
}

.action {
    text-align: left;
}

/*任务列表页面样式*/
page {
    background: #f1f1f1;
}

.tasklist {
    border-radius: 10px;
    color: #666;
    margin: 0 15rpx 30rpx;
    background: #fff;
    /*border:1px solid #fff;*/
}

.task-orange {
    border-left: 4px solid #f37b1d;
    box-shadow: 5px 5px 5px #ddd;
    border-radius: 6px;
}

.task-green {
    border-left: 4px solid #39b54a;
    box-shadow: 5px 5px 5px #ddd;
    border-radius: 6px;
}

.task-blue {
    border-left: 4px solid #0081ff;
    box-shadow: 5px 5px 5px #ddd;
    border-radius: 6px;
}

.task-red {
    border-left: 4px solid #e54d42;
    box-shadow: 5px 5px 5px #ddd;
    border-radius: 6px;
}

.arrow {
    width: 14px;
    height: 14px;
}

.task_title {
    font-weight: 700;
}

.tasklist .cu-bar {
    min-height: 80rpx;
}
</style>